<template>
  <div class="hp_01">
    <div class="block" m="t-4">
      <el-carousel trigger="click" :autoplay="true" :interval="2000">
        <el-carousel-item v-for="(item,index) in hpList" :key="index">
          <img :src="item" style="width: 100%;height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="site_trend">
      <el-row>
        <el-col :span="11">
          <el-row :span="1">
            <el-text tag="b" style="font-size: 18px" >人气场地</el-text>
            <blank-space/>
            <el-text class="mx-1" type="primary">更多</el-text>
          </el-row>
          <el-row
              v-for="(o, index) in popularList"
              :key="index"
              :span="8"
              :offset="index > 0 ? 2 : 0"
              class="el_1"
          >
            <el-card :body-style="{ padding: '10px'}" shadow="hover">
              <el-row :gutter="20" >
                <el-col :span="9">
                  <img
                      :src="o.url"
                      class="image"
                  />
                </el-col>
                <el-col :span="15">
                  <div style="padding: 14px">
                    <span>{{o.siteName}}</span>
                    <p class="site_p">地址：{{o.siteAdd}}</p>
                    <p class="site_p">联系电话：{{o.sitePho}}</p>
                    <div class="bottom">
                      <time class="time">营业时间：{{ o.siteTime }}</time>
                      <el-button text class="button" > 预约 </el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-row>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-row :span="1">
            <el-text tag="b" style="font-size: 18px">最新动态</el-text>
            <blank-space/>
            <el-text class="mx-1" type="primary">更多</el-text>
          </el-row>
          <el-row
              v-for="(o, index) in trendList"
              :key="index"
              :span="8"
              :offset="index > 0 ? 2 : 0"
              class="el_1"
          >
            <el-card :body-style="{ padding: '10px'}" shadow="hover">
              <el-row :gutter="20" >
                <el-col :span="9">
                  <img
                      :src="o.url"
                      class="image"
                  />
                </el-col>
                <el-col :span="15">
                  <div style="padding: 14px">
                    <span>{{o.trendTitle}}</span>
                    <p class="site_p">{{o.trendContext}}</p>
                    <div class="bottom">
                      <time class="time">{{ o.trendTime }}</time>
                      <el-button text class="button">详情</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  name: 'FirstPage',
  data() {
    return {
      hpList: [
        require('@/assets/img/homePage/hp_01.jpg'),
        require('@/assets/img/homePage/hp_02.png'),
        require('@/assets/img/homePage/hp_03.png'),
        require('@/assets/img/homePage/hp_04.png'),
        require('@/assets/img/homePage/hp_05.png'),
      ],
      popularList:[
        {
          url:require('@/assets/img/site/tt_01.png'),
          siteName:'琪恒乒乓球馆',
          siteAdd:'民建街阜沙镇中心幼儿园南侧',
          sitePho:'18924987191',
          siteTime:'周一至周日 08:00-22:00',
        },
        {
          url:require('@/assets/img/site/bm_05.png'),
          siteName:'波牛羽毛球馆',
          siteAdd:'进源路与东成路交汇处北100米',
          sitePho:'13822796433',
          siteTime:'周一至周日 10:00-23:30',
        },
        {
          url:require('@/assets/img/site/bk_05.png'),
          siteName:'筋斗云篮球场',
          siteAdd:'广珠公路鸿福翰城东侧',
          sitePho:'13485232202',
          siteTime:'周一至周日 08:30-22:00',
        },
        {
          url:require('@/assets/img/site/fb_01.png'),
          siteName:'律动足球场',
          siteAdd:'广东省中山市同胜大街39号',
          sitePho:'(0760)862873201',
          siteTime:'周一至周日 09:00-22:00',
        },
        {
          url:require('@/assets/img/site/fb_01.png'),
          siteName:'兴中足球场',
          siteAdd:'广东省中山市兴中道28号',
          sitePho:'(0760)88311427',
          siteTime:'周一至周日 00:00-24:00',
        },
      ],
      trendList:[
        {
          url:require('@/assets/img/trend/td_01.png'),
          trendTitle:'新足球场上新啦！',
          trendContext:'为给广大市民提供更加舒适的运动场地,结合翠亨新区...',
          trendTime:'2023-7-18',
        },
        {
          url:require('@/assets/img/trend/td_02.png'),
          trendTitle:'打乒乓球的人越来越多了',
          trendContext:'体育场室外锻炼的人陆续离开，但乒乓球馆开始热闹起来...',
          trendTime:'2023-7-08',
        },
        {
          url:require('@/assets/img/trend/td_03.png'),
          trendTitle:'中山这个场馆变靓了！',
          trendContext:'为进一步增进体育馆及外协单位员工相互间的交流和友谊...',
          trendTime:'2023-6-18',
        },{
          url:require('@/assets/img/trend/td_04.png'),
          trendTitle:'关于羽毛球馆举办活动的通知',
          trendContext:'5月13日、14日不对外预约场地，请各位球友关注通知...',
          trendTime:'2023-5-10',
        },
        {
          url:require('@/assets/img/trend/td_05.png'),
          trendTitle:'5月3日体育馆人数统计',
          trendContext:'5月3日体育场内及周边健身活动人数统计如下...',
          trendTime:'2023-5-03',
        },
      ]

    }
  },
  // methods:{
  //   nextSlide(){
  //     this.$refs.carousel.next()
  //   }
  // }
}
</script>

<script setup>
// import { ref } from 'vue'
import BlankSpace from "@/components/BlankSpace.vue";
// const currentDate = ref(new Date())
</script>
<style scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.el_1{
  padding: 5px;
}
.el-col-24{
  max-width: 45%;
}
.mx-1:hover{
  color: #F8CF01;
  cursor: pointer;
}
.site_trend{
  margin-top: 25px;
}
.site_p{
  font-size: 10px;
  color: #999999;

}
.el-card:hover{
  background-color: #F8CF01;
  cursor: pointer;
}
.hp_01{
  height: 1300px;
}
</style>

